@charset "utf-8";
/* CSS Document */
*{
	margin:0;
	padding:0;
	}
figure{
	position:relative;
	width:33.33%;
	overflow:hidden;
	font-family:微软雅黑;
	color:#fff;
	float:left;
	}
figcaption{
	position:absolute;
	top:0px;
	left:0px;
	}
figcaption p,h2,span,div{transition:all 0.35s;}
figure img{opacity:0.8;transition:all 0.35s;}
@media screen and (min-width:1001px){
	figure{width:33.33%}
	}
@media screen and (max-width:600px){
	figure{width:100%}
	}
@media screen and (min-width:601px) and (max-width:1000px){
	figure{width:50%}
	}
.test1{
	background-color:#090000;
	}
.test1 p{
	text-align:center;
	margin-top:5px;
	color:#9F3400;
	background:#FEFEFE;
	transform:translate(-120px,0px)
	}
.test1 figcaption{
	padding:5px;
	}
.test1 figcaption p:nth-of-type(1){transition-delay:0.05s;}
.test1 figcaption p:nth-of-type(2){transition-delay:0.1s;}
.test1 figcaption p:nth-of-type(3){transition-delay:0.15s;}
.test1:hover p{transform:translate(0px,0px)}
.test1:hover img{transform:translate(-50px,0px)}

.test2{background-color:#090000;}
.test2 figcaption{width:100%;height:100%;}
.test2 figcaption p{margin-left:15%;opacity:0;transform:translate(0px,50px)}
.test2 figcaption h2{margin-top:15%;margin-left:15%;transform:translate(-20px,0px)}
.test2 figcaption div{
		position:absolute;
		top:10%;
		left:10%;
		border:2px solid #F5F5F5;
		width:80%;
		height:80%;
		transform:translate(0px,-350px) rotate(0deg);
	}
.test2:hover figcaption div{
		transform:translate(0px,0px) rotate(360deg);/*做动画的时候不能写两个transform属性，用空格隔开就好了*/
	}
.test2:hover img{opacity:0.5}
.test2:hover figcaption p{opacity:0.5;transform:translate(0px,0px)}
.test2:hover  figcaption h2{margin-top:15%;margin-left:15%;transform:translate(0px,0px)}

.test3{background-color:#090000;}
.test3 figcaption{
	top:30%;
	left:15%;
	}
.test3 figcaption p{transform:skew(90deg);transition-delay:0.1s}
.test3 figcaption h2{transform:skew(90deg)}
.test3:hover figcaption p{transform:skew(0deg);}
.test3:hover figcaption h2{transform:skew(0deg);}
.test3:hover img{opacity:0.5}

.test4{background-color:#090000;}
.test4 figcaption{width:100%;height:100%;}
.test4 figcaption p{margin-left:15%;transform:scale(1.2,1.2);opacity:0;}
.test4 figcaption h2{margin-top:15%;margin-left:15%;transform:scale(1.2,1.2);opacity:0;}
.test4 figcaption div{
		position:absolute;
		top:10%;
		left:10%;
		border:2px solid #F5F5F5;
		width:80%;
		height:80%;
		opacity:0;
		transform:scale(1.2,1.2)
	}
.test4:hover figcaption div{
		transform:scale(1,1);
		opacity:1;/*做动画的时候不能写两个transform属性，用空格隔开就好了*/
	}
.test4:hover img{opacity:0.8;transform:scale(1.2,1.2)}
.test4:hover figcaption p{opacity:0.5;transform:scale(1,1);}
.test4:hover  figcaption h2{opacity:0.5;transform:scale(1,1);}	

.test5{background-color:#090000;}
.test5 figcaption{width:100%;height:100%;}
.test5 figcaption p{margin-left:15%;transform:scale(1.2,1.2);opacity:0;}
.test5 figcaption h2{margin-top:15%;margin-left:15%;transform:scale(1.2,1.2);opacity:0;}
#div1{
		position:absolute;
		top:10%;
		left:10%;
		border-left:2px solid #F5F5F5;
		border-right:2px solid #F5F5F5;
		width:50%;
		height:80%;
		opacity:0;
		transform:scale(1,0)
	}
#div2{
		position:absolute;
		top:10%;
		left:10%;
		border-top:2px solid #F5F5F5;
		border-bottom:2px solid #F5F5F5;
		width:80%;
		height:50%;
		opacity:0;
		transform:scale(0,1)
	}
.test5:hover figcaption #div1{
		transform:scale(1,1);
		opacity:1;/*做动画的时候不能写两个transform属性，用空格隔开就好了*/
	}
.test5:hover figcaption #div2{
		transform:scale(1,1);
		opacity:1;/*做动画的时候不能写两个transform属性，用空格隔开就好了*/
	}
.test5:hover img{opacity:0.8;transform:scale(1.2,1.2)}
.test5:hover figcaption p{opacity:0.5;transform:scale(1,1);}
.test5:hover  figcaption h2{opacity:0.5;transform:scale(1,1);}	
	
	
/*.test5{background-color:#279053;opacity:0.8;}
.test5 figcaption{width:100%;height:100%;}
.test5 figcaption p{margin-left:15%;transform:scale(1.2,1.2);opacity:0;}
.test5 figcaption h2{margin-top:15%;margin-left:15%;transform:scale(1.2,1.2);opacity:0;}
.test5 figcaption div:nth-of-type(1){
		position:absolute;
		top:10%;
		left:10%;
		border-left:2px solid #F5F5F5;
		border-right:2px solid #F5F5F5;
		width:80%;
		height:80%;
		opacity:0;
		transform:scale(0,0);
	}
.test5 figcaption div:nth-of-type(2){
		position:absolute;
		top:10%;
		left:10%;
		border-top:2px solid #F5F5F5;
		border-bottom:2px solid #F5F5F5;
		width:80%;
		height:80%;
		opacity:0;
		transform:scale(0,0);
	}
.test5:hover figcaption div:nth-of-type(1){
		transform:scale(1,1);
		opacity:0.5;/*做动画的时候不能写两个transform属性，用空格隔开就好了*/
	/*}
.test5:hover figcaption div:nth-of-type(2){
		transform:scale(1,1);
		opacity:0.5;/*做动画的时候不能写两个transform属性，用空格隔开就好了*/
	/*}
.test5:hover img{opacity:0.5;transform:scale(1.2,1.2)}
.test5:hover figcaption p{opacity:0.5;transform:scale(1,1);}
.test5:hover figcaption h2{opacity:0.5;transform:scale(1,1);}	*/
	